<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>HTML5/CSS3 3D魔方游戏DEMO演示</title>
    <link rel="stylesheet" type="text/css" href="styles/cube.css">
    <link rel="stylesheet" type="text/css" href="styles/doodle2.css">


    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="shield/shiled.css">

    <!-- compiled & minified cube code -->
    <script charset="utf-8" src="scripts/tween.r12.js"></script>
    <script charset="utf-8" src="scripts/three.js"></script>
    <script charset="utf-8" src="scripts/cuber.min.js"></script>

</head>
<body>


<div id="bg">
<!--    <img id="bg-img" style="z-index: -1" src="img/wangzhe.jpg">-->


<!--    div 变成 行内-->
<!--    <div style="height: 400px;display: inline-block">-->
    <div style="height: 400px;display: inline">
        <button id="showRubik" type="button" class="btn btn-default">显示魔方</button>
        <button id="solve" type="button" class="btn btn-default">还原魔方</button>
        <button id="crossSplit" type="button" class="btn btn-default">十字劈</button>
        <button id="originalInterface" type="button" class="btn btn-default">原始界面</button>
    </div>

    <div class="shield" style="display: none">

        <img src="shield/images/shield_1_01.png" alt="">
        <img src="shield/images/shield_1_02.png" alt="">
        <img src="shield/images/shield_1_03.png" alt="">
        <img src="shield/images/shield_1_04.png" alt="">
        <img src="shield/images/shield_1_05.png" alt="">
        <img src="shield/images/shield_1_06.png" alt="">
        <img src="shield/images/shield_1_07.png" alt="">
        <img src="shield/images/shield_1_08.png" alt="">
        <img src="shield/images/shield_1_09.png" alt="">

    </div>


    <div id="container" style="position:absolute;">
        <!-- 标准的按钮 -->
<!--        <button id="solve" type="button" class="btn btn-default">还原魔方</button>-->
        <!--  <button id="show"  type="button" class="btn btn-default">显示魔方</button>-->
        <!--    <button id="showRubik" type="button" class="btn btn-default">显示魔方</button>-->
        <!--    <button id="show">显示魔方</button>-->
        <!--  <button id="solve"></button>-->
    </div>
    <!--<div>-->
    <!--  <button id="solve"></button>-->
    <!--</div>-->
    <div id="uipanel" class="fadeTransition" style="display:none">
        <div id="movecounter"></div>
        <div id="buttonpanel"></div>
    </div>

</div>

<script charset="utf-8" src="scripts/deviceMotion.js"></script>
<script charset="utf-8" src="scripts/locked.js"></script>
<script charset="utf-8" src="scripts/certificate.js"></script>
<script charset="utf-8" src="scripts/main3.js"></script>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>-->
<script src="shield/shield.js"></script>
<script>


    // let divShield=document.querySelector('.shield')
    let divShield = document.getElementsByClassName('shield')[0];
    // let $shield=document.querySelector('shield')
    // let shield = new Shield($shield);
    let shield = new Shield(divShield);
    // shield.shield
    shield.shuffle()
    // let btnShuffle=  document.getElementById("shuffle");
    // btnShuffle=shield.querySelector("shuffle");
    // btnShuffle=shield.gete("shuffle");
    // btnShuffle.onclick=shield.shuffle
    // 这样导致 this变化

    // btnShuffle.addEventListener('click', shield.shuffle);

    // btnShuffle.addEventListener('click', function (){
    //     shield.shuffle()
    // });


    // btnShuffle.onclick=shield.shuffle()
    // btnShuffle.addEventListener('click' 会让this 变
    // https://blog.csdn.net/nzyalj/article/details/70568455


    function showRubik() {
        container.style.display = "block";
        divShield.style.display = "none";
        shield.shuffle()
    }

    var $showRubik = document.querySelector('#showRubik');
    $showRubik.addEventListener('click', function () {
        // randomRotate();
        // show();
        showRubik();
        // show 魔方
        // Threejs_rubik
    }, false);

    var $crossSplit = document.querySelector('#crossSplit');
    // var $bg = document.querySelector('#bg');
    let $bg =   $("#bg");
    $crossSplit.addEventListener('click', function () {
        crossSplitShow();
    }, false);

    // // https://www.cnblogs.com/lmyau/p/7736269.html
    // function  crossSplitShow() {
    //     console.log("crossSplitShow")
    //     // $bg.style.background="img/短发女孩 十字架 4k动漫.jpg"
    //     // 必然是要全部设置 不然就用不了
    //     // $bg.style.background="#f3f3f3 url('img/短发女孩 十字架 4k动漫.jpg')  no-repeat right top"
    //     // $bg.style.background-image="url(img/短发女孩 十字架 4k动漫.jpg)"
    //     // $bg.css("background : #f3f3f3 url('img/短发女孩 十字架 4k动漫.jpg')  no-repeat right top")
    //     // $bg.css("background",  "url('img/短发女孩 十字架 4k动漫.jpg')" )
    //     // $bg.css("background",  "url(img/shizi1024.jpg)" )
    //     // $bg.css("background",  "url(img/shizi1550.jpg) no-repeat" )
    //     // $bg.css("background",  "url(img/shizi1550x900.jpg) no-repeat" )
    //     // $bg.css("background",  "url(img/shizi1600x800.jpg) no-repeat" )
    //     // $bg.css("background",  "url(img/shizi1536x864.jpg) no-repeat" )
    //     $bg.css("background",  "url(img/shizi1536x864.jpg) no-repeat" )
    //     // css background size
    //     // background-size:80px 60px;
    // }

  $  ("#originalInterface").click(()=>{
      // $bg.css("background",  "#f3f3f3 url(img/wangzhe.jpg) no-repeat  1550px 750px" )
      // $bg.css("background",  "#f3f3f3 url(img/wangzhe.jpg) " )
      $bg.css("background",  "#f3f3f3 url(img/wangzhe.jpg) no-repeat right top" )
      $bg.css("background-size",  "1550px 750px" )
      // size 也要的
      // 1550px 750px;
  })
    // console.log(499+365)
    // 684
    // 864


</script>


</body>
</html>
